<template>
<transition name="fade">
  <div class="box">
    <header class="pro-header">
      <mt-header title="优品">
        <router-link to="/life/follow" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <mt-button class="iconfont icon-ai-search" slot="right"></mt-button>
      </mt-header>
    </header>
    <div class="pro-content">
      <div class="pro-banner">
        <div class="bg"></div>
        <div class="pro-img" @click="toDetail">
          <!-- <img :src="ban.media" alt=""> -->
          <img src="./../../assets/baike1.jpg" alt="">
        </div>
      </div>
      <div class="pro-tips">
          商品分类
      </div>

      <div class="pro-nav">
        <ul>
          <router-link to="/clean" tag="li"><i class="iconfont icon-qingjie"></i><span>清洁</span></router-link>
          <router-link to="/feed" tag="li"><i class="iconfont icon-ziyuan"></i><span>喂养</span></router-link>
          <router-link to="/clothes" tag="li"><i class="iconfont icon-tongzhuang"></i><span>童装</span></router-link>
          <router-link to="/more" tag="li"><i class="iconfont icon-gengduo1"></i><span>更多</span></router-link>
        </ul>
      </div>

      <div class="pro-list">
        <h2>宝宝必备<p class="mone" @click="BabyNeed">更多</p></h2>
        <ul>
          <li @click="toDetail">
            <img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/725677994/O1CN01zYtGo528vIdPhZyiE_!!0-item_pic.jpg_360x360Q90.jpg_.webp" alt="">
            <p>1片吸干6次尿</p>
            <span>会员价￥199</span>
          </li>
          <li @click="toDetail">
            <img src="https://tgi1.jia.com/119/624/19624632.jpg" alt="">
            <p>宝宝秋冬加棉保暖套装</p>
            <span>会员价￥299</span>
          </li>
          <li @click="toDetail">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545578442&di=44e1b81b91a0648b6453c87799e79522&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F02%2F20150202235652_yPUrc.jpeg" alt="">
            <p>小公主内搭套装</p>
            <span>会员价￥309</span>
          </li>
          <li @click="toDetail" v-for="(item, index) in prolist" :key="index">
            <img :src="item.media" alt="">
            <p>{{item.proname}}</p>
            <span>会员价￥{{item.vprice}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
  data () {
    return {
      ban: [],
      prolist: []
    }
  },
  created () {
    let data = {
      token: '7qwN83Y2xI2xasQikfLHvwFwLQKxxk5wZyi6Ej+So2Vx1864is3FP2c+zr18HzNAC7fzHZHbmLDWwJraATqJ+cjyp9aSekyCKPoiVit0kHqEJYNu3/HhVAqSW1YJBo9GtG4aH2RSdJ194HC4Slo8wLMBKgvd61ZSGeyJJ80HEnPtUff6/csmpBFsSlXoVRN+DygYwJsRRi2im1HkL0zDJr9GL1nJSxfJLr2+3dEGuEGyDJYuS6aGVaSzY7BCGX2OBspUNJw5BuYR/t3hvUWPCYbfCSehfNHALihJVTJ39LLJ9d/uyc4ciyBA5ZbusTst'
    }
    let data1 = {
      token: '7qwN83Y2xI2xasQikfLHvwFwLQKxxk5wZyi6Ej+So2Vx1864is3FP2c+zr18HzNAC7fzHZHbmLDWwJraATqJ+cjyp9aSekyCKPoiVit0kHqEJYNu3/HhVAqSW1YJBo9GtG4aH2RSdJ194HC4Slo8wLMBKgvd61ZSGeyJJ80HEnPtUff6/csmpBFsSlXoVRN+DygYwJsRRi2im1HkL0zDJr9GL1nJSxfJLr2+3dEGuEGyDJYuS6aGVaSzY7BCGX2OBspUNJw5BuYR/t3hvUWPCYbfCSehfNHALihJVTJ39LLJ9d/uyc4ciyBA5ZbusTst',
      tid: 4,
      pageNum: 1,
      pageSize: 5
    }
    // banner图区
    axios({
      method: 'post',
      url: 'http://47.99.223.44:8081/bestgoodsimg.do',
      data: Qs.stringify(data)
    })
      .then((res) => {
        console.log(res)
        const obj = res.data.data
        this.ban = obj
        console.log(this.ban)
      })
      .catch(function (error) {
        console.log(error)
      })
    // 宝宝必备商品区
    axios({
      method: 'post',
      url: 'http://47.99.223.44:8081/productbytid.do',
      data: Qs.stringify(data1)
    })
      .then((res) => {
        console.log(res)
        const obj = res.data.list
        this.prolist = obj
        console.log(this.prolist)
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    BabyNeed () {
      this.$router.push('/babyneed')
    },
    toDetail () {
      this.$router.push('/prodetail')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
 .pro-header {
    @include rect(100%, 0.4rem);
    text-align: center;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 0);
    border: none;
    .mint-header {
      // background-color: rgb(226, 226, 226);
      height: 100%;
      background-color: rgb(172, 235, 219);
      h1, .mint-header-button{
        color: rgba(100, 100, 100, 1);
        font-size: 0.16rem;
        .mintui-back {
          font-weight: 900;
        }
      }
    }
  }
  .pro-content {
    overflow-y: auto;
    // 导航图
    .pro-banner {
      position: relative;
      overflow: hidden;
      @include rect(100%, 1.7rem);
      //  background-color: rgb(226, 226, 226);
      .bg {
          @include rect(100%, 0.8rem);
          background-color: rgb(172, 235, 219);
        }
      .pro-img {
        position: absolute;
        top: 0;
        margin-top: 0.1rem;
        @include rect(3.48rem, 1.5rem);
        margin-left: 0.13rem;
        border-radius: 0.12rem;
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        font-family: Arial;
        border: 1px solid rgba(255, 255, 255, 0);
        img {
          @include rect(100%, 100%);
          border-radius: 0.12rem;
        }
      }
    }
    // 提示框
    .pro-tips {
      @include rect(3.38rem, 0.45rem);
      // margin-top: 0.1rem;
      margin-left: 0.17rem;
      line-height: 0.45rem;
      border-radius: 0.12rem;
      background-color: rgba(118, 221, 195, 0.726);
      color: rgb(87, 83, 83);
      font-size: 0.16rem;
      text-align: center;
      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
      font-family: Arial;
      border: 1px solid rgba(255, 255, 255, 0);
    }
    // 导航图标
     .pro-nav {
      @include rect(100%, 0.75rem);
      margin-bottom: 0.15rem;
      ul {
        margin-top: 0.16rem;
        @include flexbox();
        @include justify-content(space-around);
        li {
          @include flexbox();
          @include flex-direction(column);
          @include align-items();
          // &.router-link-active {
          //   i {
          //     background-color: rgba(255, 255, 255, 0.877);
          //   }
          //   span {
          //     color: rgb(228, 133, 133);
          //   }
          // }
          i {
            @include rect(0.44rem, 0.44rem);
            @include justify-content();
            background-color: #FFFADA;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0);
            border-radius: 50%;
            font-size: 0.28rem;
            color: #83D8C3;
          }
          // .icon-qingjie {
          //   color: rgb(80, 180, 226);
          // }
          // .icon-ziyuan {
          //   color: rgb(242, 243, 170);
          // }
          // .icon-tongzhuang {
          //   color: rgb(255, 250, 174);
          // }
          // .icon-gengduo1 {
          //   color: rgb(83, 83, 83);
          // }
          span {
            display: inline-block;
            margin-top: 0.06rem;
            color: rgba(166, 164, 164, 1);
            font-size: 0.12rem;
            text-align: center;
            box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
            font-family: Arial;
            border: 1px solid rgba(255, 255, 255, 0);
          }
        }
      }
    }
    // 列表
    .pro-list {
      h2 {
        width: 100%;
        height: 0.3rem;
        line-height: 0.3rem;
        color: rgb(83, 83, 81);
        border-bottom: 2px solid #9CE6D3;
        text-indent: 0.25rem;
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        .mone {
          float: right;
          margin-right: 0.25rem;
          font-size: 0.12rem;
          color: rgb(158, 158, 158);
        }
      }
      ul {
        @include rect(100%, 100%);
        li {
          float: left;
          @include flexbox();
          @include flex-direction(column);
          @include justify-content();
          @include align-items();
          margin: 0.17rem 0.15rem 0 0.22rem;
          font-size: 0.12rem;
          img {
            width: 0.86rem;
            height: 0.86rem;
            border-radius: 0.08rem;
            border: 1px solid rgba(187, 187, 187, 1);
          }
          p {
            margin-top: 0.05rem;
            width: 0.86rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

</style>
